<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in searchResulList"
        :key="item.art_id"
        :title="item.title"
        @click="goArticle(item.art_id)"
      />
    </van-list>
  </div>
</template>
<script>
import { searchResultApi } from "@/api/home";
export default {
  props: {
    searchvalue: String,
  },
  data() {
    return {
      searchResulList: [],
      page: 1,
      loading: false,
      finished: false,
    };
  },
  //页面一打开 就显示搜索结果

  methods: {
    async onLoad() {
      let obj = {
        page: this.page,
        per_page: 10,
        q: this.searchvalue,
      };
      try {
        let { data } = await searchResultApi(obj);
        if (data.data.results.length != 0) {
          this.page++;
          this.searchResulList = [
            ...this.searchResulList,
            ...data.data.results,
          ];
          this.loading = false;
        } else {
          //数据全部加载完毕
          this.finished = true;
        }
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },
    //点击跳转到文章详情
    goArticle(id) {
      this.$router.push({ path: `/article/${id}` });
    },
  },
};
</script>
<style scoped></style>
